<template>
  <view class="publish-button" @click="handleClick">
    <view class="publish-icon">
      <u-icon name="plus" size="28" color="#ffffff" />
    </view>
  </view>
</template>

<script setup>
const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click')
}
</script>

<style scoped lang="scss">
.publish-button {
  position: fixed;
  bottom: 140rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 112rpx;
  height: 112rpx;
  border-radius: 56rpx;
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.publish-button:active {
  transform: translateX(-50%) scale(0.95);
}

.publish-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

